<template>
	<div class="login_wrapper" v-loading="loading">
		<img class="bg" :src="loginBackground" />
		<el-card class="login_body">
			<template slot="header">
				<img :src="logoUrl" alt="" />
			</template>
			<el-form ref="registerForm" :rules="formRules" :model="registerForm">
				<el-form-item prop="account">
					<el-input prefix-icon="el-icon-sw-user" v-model="registerForm.account" @keyup.enter.native="handleSubmitRegister"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input prefix-icon="el-icon-sw-pass" show-password v-model="registerForm.password" @keyup.enter.native="handleSubmitRegister"></el-input>
				</el-form-item>
				<el-form-item prop="password2">
					<el-input
						prefix-icon="el-icon-sw-pass"
						show-password
						v-model="registerForm.password2"
						@keyup.enter.native="handleSubmitRegister"
					></el-input>
				</el-form-item>
				<el-form-item><el-button class="login" type="primary" @click="handleSubmitRegister" :loading="btnLoading">注册</el-button></el-form-item>
			</el-form>
			<div class="buttons">
				<el-button type="text" icon="el-icon-arrow-left" @click="handleReturnIndex">返回首页</el-button>
				<p>
					已有用户去
					<el-button type="text" @click="handleToLogin">登陆</el-button>
				</p>
			</div>
		</el-card>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { register } from '@/api/login';
export default {
	data() {
		const confirmPass = (rule, value, callback) => {
			if (!value) {
				callback('请重新输入用户密码');
			} else if (this.registerForm.password !== value) {
				callback('两次输入的密码不一致，请重新输入');
			} else {
				callback();
			}
		};
		return {
			loading: false,
			registerForm: { account: '', password: '', password2: '' },
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
				password2: [{ validator: confirmPass, trigger: 'blur' }]
			},
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		logoUrl() {
			console.log(this.siteInfo);
			return !this.siteInfo.logo ? require('@/assets/img/head_logo.png') : this.siteInfo.logo.httpUrl;
		},
		loginBackground() {
			return !this.siteInfo.loginBg ? require('@/assets/img/head_logo.png') : this.siteInfo.loginBg.httpUrl;
		},
		isRedirect() {
			return this.$route.query.redirect;
		}
	},
	methods: {
		//提交登陆
		handleSubmitRegister() {
			this.$refs['registerForm'].validate(vail => {
				if (!vail) return false;
				this.btnLoading = true;
				this.registerRequest(this.registerForm);
			});
		},

		//注册请求
		async registerRequest(data) {
			let result = await register(data).then(res => res);
			console.log(result);
			/* this.btnLoading = false;
			if (result.data.code === 0) {
				this.$message.success('登陆成功');
				this.$refs['registerForm'].resetFields();
				this.$router.replace('/login');
			} */
		},

		//返回首页
		handleReturnIndex() {
			this.$router.replace('/index');
		},

		//去注册
		handleToLogin() {
			this.$router.replace('/login');
		}
	}
};
</script>

<style lang="scss" scoped>
.login_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		z-index: 1;
		object-fit: cover;
	}
}
.login_body ::v-deep {
	position: relative;
	width: 400px;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	.el-card__header {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: none;
		padding: 20px 0 0;
		img {
			height: 40px;
		}
	}
	.el-card__body {
		padding: 20px 40px 20px;
	}
	.el-form {
		.el-button.login {
			width: 100%;
			font-size: 18px;
			border-color: #357c65;
			background-color: #357c65;
		}
	}
	.buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		p {
			display: flex;
			align-items: center;
			line-height: 1;
		}
		.el-button {
			padding: 0;
			color: #357c65;
		}
	}
}
</style>
